<template>
	<div class="booksupdate">
		<div class="heada2">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>添加新的商品</el-breadcrumb-item>
				<el-breadcrumb-item>添加或者修改</el-breadcrumb-item>
			</el-breadcrumb>
			<div> <el-link type="primary" @click="back()">返回</el-link></div>
		</div>

		<div class="health">
			<div class="filex">
				<img :src="imageUrl" alt='点击上传图片'>
				<input type="file" ref="upfile" @change="onFileChange">
			</div>
			<div class="health1">
				<el-form :model="book" ref="book">
					<el-form-item label="商品名称" prop="name">
						<el-input v-model="book.name">
						</el-input>
					</el-form-item>
					<el-form-item label="商品序号" prop="sn">
						<el-input v-model="book.sn" placeholder='数字越大，显示在前面'></el-input>
					</el-form-item>
					<el-form-item label="商品价格" prop="price">
						<el-input v-model="book.price"></el-input>
					</el-form-item>
					<el-form-item label="商品厂商" prop="maker">
						<el-input v-model="book.maker"></el-input>
					</el-form-item>
					<el-form-item label="书籍作者" prop="author">
						<el-input v-model="book.author"></el-input>
					</el-form-item>
					<el-form-item label="出厂时间" prop="tmake">
						<el-date-picker type="date" v-model="book.tmake"></el-date-picker>
					</el-form-item>
					<el-form-item label="商品库存" prop="stock">
						<el-input v-model="book.stock"></el-input>
					</el-form-item>
					<el-form-item label="商品类型">
						<el-cascader v-model="book.type.id" :props="{value:'id',label:'name',emitPath:false}"
							:options="list"></el-cascader>
					</el-form-item>
					<el-form-item label="商品详情" prop="info">
						<el-input v-model="book.info"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="submitForm('book')">保存</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		name: "bookupdate",
		data() {
			return {
				book: {
					id: 0,
					type: {
						id: 0
					}
				},
				list: [],
				bookid: 0,
				imageUrl: '',
			}
		},
		created() {
			this.bookid = this.$route.params.id;
			if (this.bookid != 0) {
				this.$axios.get(`/api/adm/book/findById/${this.bookid}`).then((res) => {
					if (res.status == 200) {
						this.book = res.data.data
						console.log(this.book);
						this.imageUrl = 'api/public/showimg/' + this.book.pic
					}
				}).catch((error) => {
					console.log(error);
				})
			}
			let typelist = [];
			this.$axios.get('/api/adm/type/findAll2').then((res) => {
				if (res.status == 200) {
					typelist = res.data.data;
					typelist.forEach((item, i) => {
						if (item.pid === 0) {
							this.list.push({
								...item,
								children: [],
							})
						}
					})
					typelist.forEach((item1) => {
						this.list.forEach((item2) => {
							if (item1.pid === item2.id) {
								item2.children.push({
									...item1
								})
							}
						})
					})
					this.list.forEach((item2) => {
						if (item2.children.length < 1) {
							item2.children = undefined
						}
					})
				}
			}).catch((error) => {
				console.log(error);
			})
		},
		methods: {
			submitForm() {
				let param = new FormData();
				let filex = this.$refs.upfile.files[0];
				param.append("mypic", filex);
				param.append("id", this.book.id);
				param.append("name", this.book.name);
				param.append("sn", this.book.sn);
				param.append("author", this.book.author);
				param.append("maker", this.book.maker)
				param.append("tmake", new Date(this.book.tmake).getTime()) //时间
				param.append("type.id", this.book.type.id) //Book.BookType.id
				param.append("pic", this.book.pic) //图片 UUID 上传上去				
				param.append("price", this.book.price)
				param.append("info", this.book.info)
				param.append("stock", this.book.stock)
				this.$axios.post('/api/adm/book/add', param, {
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				}).then((res) => {
					console.log(res);
					if (res.status == 200) {
						this.$router.push({
							path: '/adm/allgoods'
						})
						this.$message({
							message: "添加成功",
							type: "success"
						})
					}
				}).catch((error) => {
					console.log(error);
				})

			},
			handleChange(value) {
				console.log(value);
			},
			onFileChange(event) {
				const file = event.target.files[0];
				if (file) {
					const reader = new FileReader();
					reader.onload = (e) => {
						this.imageUrl = e.target.result;
					};
					reader.readAsDataURL(file);
				}
			},
			back() {
				this.$router.go(-1)
			}
		},
	}
</script>

<style scoped>
	.booksupdate {
		width: 100%;
	}

	.booksupdate .heada2 {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 1vw;
	}

	.booksupdate .health .filex {
		width: 400px;
		height: 400px;
		display: flex;
		text-align: center;
		border: 1px solid black;
		background-color: #fafafa;
	}

	.booksupdate .health .filex img {
		width: 100%;
		text-align: center;
		height: 100%;
	}

	.booksupdate .health .filex input[type='file'] {
		width: 400px;
		height: 400px;
		text-align: center;
		position: absolute;
		opacity: 0;
	}

	.booksupdate .health {
		display: flex;
		justify-content: space-around;
		flex-direction: row;
		width: 100%;
		margin-top: 2vw;
	}

	.booksupdate .health .health1 {
		width: 60%;
	}

	.el-input {
		width: 60%;
		height: 5px;
	}
</style>